<template>
    <div>
            <div class="w">
            <t-header></t-header>

            <!-- 歌手列表 -->
            <div class="singer-wrap">
                <div class="w">
                    <div v-if="isSinger" class="no-singer">没有更多歌手了...</div>
                    <div class="singer-list">
                        <div
                        @click="jumpSingerInfo(item)"
                        :key="index"
                        v-for="(item,index) in singerList" 
                        class="list-item">
                            <img v-lazy="item.picUrl">
                            <span>{{item.name}}</span>
                        </div>
                    </div>

                    <div class="page">
                        <a @click="pageL" href="javascript:;">上一页</a>
                        <a @click="pageR" href="javascript:;">下一页</a>
                    </div>
                </div>
            </div>
        </div>
        <t-footer></t-footer>
    </div>
</template>

<script>
import Header from '../components/Header';
import Footer from '../components/Footer';
export default {
    components: {
        't-header': Header,
        't-footer': Footer
    },
    data() {
        return {
            // 歌手列表
            singerList: [],
            // 查询的页数
            offset: 0,
        }
    },
    mounted() {
        this.getSinger(this.offset);
    },
    computed: {
        // 是否还有歌手
        isSinger() {
            let flag = this.singerList.length > 0;
            return !flag
        }
    },
    methods: {
        // 获取歌手
        async getSinger(offset) {
            let { data: res } = await this.$http.get('/top/artists', { params: { offset, limit: 20 } });
            this.singerList = res.artists;
        },
        // 上一页
        pageL() {
            if (this.offset != 0) {
                this.offset = this.offset - 20;
                this.getSinger(this.offset);
                window.scrollTo(0, 0);
            }
        },
        // 下一页
        pageR() {
            if (this.singerList.length != 0) {
                this.offset = this.offset + 20;
                this.getSinger(this.offset);
                window.scrollTo(0, 0);
            }
        },
        // 跳转到歌手详情
        jumpSingerInfo(item) {
            this.$router.push(`/singerinfo/${item.id}`);
            this.$store.commit('setCurrentSingerData', item);
        }
    }
}
</script>


<style lang="less" scoped>
.singer-list {
    padding-top: 50px;
    display: flex;
    flex-wrap: wrap;
    .list-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 24%;
        margin-bottom: 30px;
        cursor: pointer;
        img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin-bottom: 12px;
        }
        span {
            color: #4a4a4a;
            font-weight: 700;
            letter-spacing: 2px;
        }
    }
}

.page {
    text-align: center;
    margin-top: 20px;
    a {
        display: inline-block;
        padding: 12px 40px;
        border: 1px solid #ccc;
        margin: 0 10px;
        color: #724a4a;
        animation: all .6s;
        &:hover {
            background-color: #409EFF;
            color: #fff;
        }
    }
}

.no-singer {
    text-align: center;
    font-size: 36px;
    line-height: 200px;
    color: #4a4a4a;
}
</style>